<template>
    <div v-if="ReplyMain">
        <div class="nav" v-if="ReplyMainLength">
            讨论区({{ ReplyMainLength }})
            <span class="iconfont icon-fanhui" @click.stop="back()"></span>
        </div>
        <div v-if="ReplyMain">
            <discussion-list
                :ReplyMain="newReplyMain"
                :ReplyMainLength="ReplyMainLength"
                :loading="loading"
                @moreMes="moreMes"
                @change="change"
                @like="like"
                @unlike="unlike"
            ></discussion-list>
        </div>
        <div class="loading" v-if="loading">
            <van-loading size="24px" vertical text-color="#0094ff" color="#0094ff"
                >加载中...</van-loading
            >
        </div>
    </div>
</template>

<script>
import DiscussionList from "@/components/DiscussionList.vue";
import _ from "lodash";
export default {
    components: { DiscussionList },
    props: {
        oid: {
            type: String,
            define: 0,
        },
    },
    data() {
        return {
            ReplyMainLength: 0,
            ReplyMain: [],
            ReplyMainTime: [],
            loading: true,
            page: 1,
            mode: 3,
            next: 0,
        };
    },
    created() {
        this.getReplyMain();
    },
    mounted() {
        window.addEventListener("scroll", this.windowScroll);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.windowScroll);
    },
    computed: {
        newReplyMain() {
            if (this.mode == 3) {
                return this.ReplyMain;
            } else {
                return this.ReplyMainTime;
            }
        },
    },
    methods: {
        async getReplyMain() {
            await this.axios
                .get(`ReplyMain?oid=${this.oid}&mode=3&next=${this.page}`)
                .then((res) => {
                    this.ReplyMainLength = res.cursor.all_count;
                    this.ReplyMain = this.ReplyMain.concat(res.replies);

                    let str = /\[.+\]/;
                    let reg = new RegExp(str, "g");
                    if (this.ReplyMain.length <= 0) {
                        return;
                    } else {
                        this.ReplyMain.forEach((v) => {
                            this.$set(v, "showMes", false);
                            this.$set(v, "islike", false);
                            this.$set(v, "isunlike", false);
                            if (v.content.emote) {
                                if (!v.content.message.match(reg)) {
                                    return;
                                }
                                let start = v.content.message.match(reg)[0].indexOf("[");
                                let end = v.content.message.match(reg)[0].indexOf("]") + 1;
                                let em = v.content.message.match(reg)[0].slice(start, end);
                                v.content.message = v.content.message.replaceAll(
                                    reg,
                                    `<img style='width:25px;height:25px' src='${v.content.emote[em].url}' />`
                                );
                            }
                            if (v.replies) {
                                v.replies.forEach((m) => {
                                    if (m.content.emote) {
                                        if (!m.content.message.match(reg)) {
                                            return;
                                        }
                                        let start = m.content.message.match(reg)[0].indexOf("[");
                                        let end = m.content.message.match(reg)[0].indexOf("]") + 1;
                                        let em = m.content.message.match(reg)[0].slice(start, end);
                                        m.content.message = m.content.message.replaceAll(
                                            reg,
                                            `<img style='width:25px;height:25px' src='${m.content.emote[em].url}' />`
                                        );
                                    }
                                    let start1 = m.content.message.indexOf("@");
                                    let end1 = m.content.message.indexOf(":");
                                    if (start1 !== -1 && end1 !== -1) {
                                        let str1 = m.content.message.slice(start1, end1);
                                        m.content.message = m.content.message.replaceAll(
                                            str1,
                                            `<span style='color:#49b4fc'>${str1}</span>`
                                        );
                                    }
                                });
                            }
                        });
                    }

                    this.loading = true;
                });
        },
        async getReplyMainMode() {
            await this.axios
                .get(`ReplyMain?oid=${this.oid}&mode=2&next=${this.next}`)
                .then((res) => {
                    this.next = res.cursor.next;
                    this.ReplyMainLength = res.cursor.all_count;
                    this.ReplyMainTime = this.ReplyMainTime.concat(res.replies);

                    let str = /\[.+\]/;
                    let reg = new RegExp(str, "g");
                    if (this.ReplyMainTime.length <= 0) {
                        return;
                    } else {
                        this.ReplyMainTime.forEach((v) => {
                            this.$set(v, "showMes", false);
                            this.$set(v, "islike", false);
                            this.$set(v, "isunlike", false);
                            if (v.content.emote) {
                                if (!v.content.message.match(reg)) {
                                    return;
                                }
                                let start = v.content.message.match(reg)[0].indexOf("[");
                                let end = v.content.message.match(reg)[0].indexOf("]") + 1;
                                let em = v.content.message.match(reg)[0].slice(start, end);
                                v.content.message = v.content.message.replaceAll(
                                    /\[.+\]/g,
                                    `<img style='width:25px;height:25px' src='${v.content.emote[em].url}' />`
                                );
                            }
                        });
                    }

                    this.loading = true;
                });
        },
        back() {
            history.back();
        },
        moreMes(e) {
            this.ReplyMain[e].showMes = !this.ReplyMain[e].showMes;
        },
        like(e) {
            this.ReplyMain[e].islike = !this.ReplyMain[e].islike;
            this.ReplyMain[e].isunlike = false;
            if (this.ReplyMain[e].islike) {
                this.ReplyMain[e].like = this.ReplyMain[e].like + 1;
            } else {
                this.ReplyMain[e].like = this.ReplyMain[e].like - 1;
            }
        },
        unlike(e) {
            this.ReplyMain[e].isunlike = !this.ReplyMain[e].isunlike;
            if (this.ReplyMain[e].islike) {
                this.ReplyMain[e].like = this.ReplyMain[e].like - 1;
                this.ReplyMain[e].islike = false;
                return;
            }
        },
        change(mode) {
            this.mode = mode;

            if (this.mode == 3) {
                this.page = 1;
                this.ReplyMain = [];
                this.getReplyMain();
            } else {
                this.next = 0;
                this.ReplyMainTime = [];
                this.getReplyMainMode();
            }
        },
        loadmore() {
            if (this.mode == 3) {
                this.page++;
                this.getReplyMain();
            } else {
                this.getReplyMainMode();
            }
            this.loading = true;
        },
        windowScroll: _.throttle(function () {
            //卷去的距离
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            scrollTop = Math.ceil(scrollTop);
            //页面的高度
            let contentHight = document.body.scrollHeight;
            //窗口内容的高度
            let clientHeight = window.innerHeight;
            if (scrollTop + clientHeight >= contentHight - 1) {
                this.loadmore();
            }
        }, 300),
    },
};
</script>

<style lang="scss" scoped>
.nav {
    text-align: center;
    position: relative;
    font-size: 16px;
    line-height: 45px;
    span {
        position: absolute;
        left: 12px;
        top: 0;
        bottom: 0;
    }
}
.loading {
    margin-top: 20px;
}
</style>
